(function ($) {

  $(function() { 
    images = {
      close: "img/close.png",
      closeHover: "img/close-hover.png"
    };
      
    overlaysInit();    
  });  
  
  /**
   * Creates a clickable area on the background
   * and a InfoBox for each chapter of the content
   */
  overlaysInit = function (){
    // Creating an options object for the marker images
    var mImgOptions = {
      width: new google.maps.Size(32, 32),  // This marker is 32 pixels wide & tall.
      origin: new google.maps.Point(0,0),   // The origin for this image is 0,0.
      anchor: new google.maps.Point(16, 16) // The anchor is the center of the circle 16,16.
    };
    for (var i = 0; i < content.length; i++){
      // Creating the marker images for normal and hover state
      content[i].mImage = new google.maps.MarkerImage("img/c"+i+".png",
        mImgOptions.width, mImgOptions.origin, mImgOptions.anchor);
      content[i].mHoverImage = new google.maps.MarkerImage("img/c"+i+"-hover.png",
        mImgOptions.width, mImgOptions.origin, mImgOptions.anchor);
      
      // Creating the actual marker
      // it appears as soon as it has a map defined
      content[i].marker = new google.maps.Marker({
        position: content[i].markerPos,
        icon: content[i].mImage,
        map: map,
        zIndex: i
      });
      
      // Adding hover and click events
      google.maps.event.addListener(content[i].marker, 'mouseover', overlaysMarkerOver);
      google.maps.event.addListener(content[i].marker, 'mouseout', overlaysMarkerOut);
      google.maps.event.addListener(content[i].marker, 'click', function(event){
        // Zooming out and center map
        map.setZoom(start.zoom);
        setTimeout(function(){ map.panTo(start.center); }, 250);
      });
      
      // Creates transparent overlay
      content[i].overlay = new google.maps.GroundOverlay(
        null, content[i].overlayBounds, { map: map });
        
        
        
    var closeImageHover = "img/close-hover.png";
      // Creates the InfoBox
      content[i].infoBox = infoBoxCreate(i);
    }
    
    // Closes InfoBoxes on click on map and when zoom level changes
    google.maps.event.addListener(map, 'zoom_changed', closeInfoBoxes); 
    google.maps.event.addListener(map, 'click', closeInfoBoxes);
    
    
    $(".infoBox > img").live("mouseover",function(){
      $(this).attr("src",images.closeHover);
    });
    $(".infoBox > img").live("mouseout",function(){
      $(this).attr("src",images.close);
    });
    
    $('.section').hover(function(){
      map.setOptions({ scrollwheel: false });
    },function(){
      map.setOptions({ scrollwheel: true });
    });
    
    
    $("#content").hide();
  }
  
  /**
   *  Changes marker image on mouseover and mouseout
   */
  function overlaysMarkerOver(event) {
    var index = this.getZIndex();
    var image = content[index].mHoverImage;
    this.setIcon(image);
  }
  
  /**
   *  Changes marker image on mouseover and mouseout
   */
  function overlaysMarkerOut(event) {
    var index = this.getZIndex();
    var image = content[index].mImage;
    this.setIcon(image);
  }
  
  /**
   * Creates InfoBox
   */
  infoBoxCreate = function ( index, closeImg ){
    // Loading the matching chapter & position from the content object
    var myOptions = {
         content: content[index].container[0]
        ,position: content[index].position
        ,alignBottom: true
        ,pixelOffset: new google.maps.Size(-300, 0)
        ,infoBoxClearance: new google.maps.Size(50, 110)
        ,closeBoxMargin: "19px 5px 0"
        ,closeBoxURL: images.close
        ,maxWidth: 0
    };
    var infoBox = new InfoBox(myOptions);
    
    // Handling clicks on overlays
    google.maps.event.addListener(content[index].overlay, 'click', function(event){
      openInfoBox(index);
      navigationHighlight(index+1);
    });
    // Handling clicks on close button
    google.maps.event.addListener(infoBox, 'closeclick', function(event){
      navigationHighlight(-1); // Deactivate navigation element
    });
  
    return infoBox;
  }
  
  /**
   * Open a specific InfoBox
   */
  openInfoBox = function ( index ){
    // Closing all InfoBoxes
    for (var i = 0; i < content.length; i++){
      content[i].infoBox.close();    
    }
    // Opening the InfoBox
    if (index >= 0){
      map.setZoom(4);
      // Delay the opening because zoom and panTo at the same time can cause problems
      setTimeout(function(){ content[index].infoBox.open(map) }, 250);
    }
  }
  
  /**
   * Closes InfoBoxes and deactivates navigation elements
   */
  closeInfoBoxes = function (){
      navigationHighlight(-1);
      openInfoBox(-1);
  }
    
})(jQuery);